<template>
	<view class="bg">
		<swiper class="detail-swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="item in result.urls" :key="item.id">
				<image :src="item.src" mode="widthFix"></image>
			</swiper-item>
		</swiper>
		<view class="detail-goods">
			<view class="goods-price1">
				¥{{result.price1}}
			</view>
			<view class="goods-price2">
				¥{{result.price2}}
			</view>
			<view class="goods-name">
				{{result.text}}
			</view>
		</view>
		<view class="detail-detail">
			<image v-for="item in result.urlss" :key="item.id" :src="item.src" mode="widthFix"></image>
		</view>
		<indexFontSize text="看了又看"></indexFontSize>
		<commomDity :dataList="result.dataList" bigH="620rpx"></commomDity>
	</view>
	<view class="detail-foot">
		<view class="iconfont icon-xiaoxi"></view>
		<view class="iconfont icon-gouwuche"></view>
		<view class="right">
			<view class="add-shopcart" @tap="show">加入购物车</view>
			<view class="purchase" @tap="show">立即购买</view>
		</view>
	</view>
	<view class="pop" v-show="isShow" @touchmove.stop.prevent="">
		<view class="mask" @tap="hide">

		</view>
		<view class="box" :animation="animationData">
			<view class="box-bg">
				<view class="img-bg">
					<image class="pop-img" :src="result.src" mode=""></image>
					<view class="f-active-color">
						¥{{result.price1}}
					</view>
				</view>
				<view class="box-bottom">
					<view class="num">
						<view>购买数量</view>
						<uni-number-box min="1"></uni-number-box>
					</view>
					<view class="pop-sub">
						确定
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import {
		getDetails
	} from "@/util/api/api.js";
	import {
		onLoad,
		onReady,
		onBackPress,
		onNavigationBarButtonTap
	} from '@dcloudio/uni-app';
	const result = ref({});
	const animationData = ref({});
	const isShow = ref(false);
	const id = ref(0);
	const show = () => {
		let animation = uni.createAnimation({
			duration: 200,
			timingFunction: 'linear'
		})
		animation.translateY(600).step()
		animationData.value = animation.export();

		setTimeout(() => {
			animation.translateY(0).step()
			animationData.value = animation.export();
			isShow.value = true;
		}, 200)
	}
	const hide = () => {
		let animation = uni.createAnimation({
			duration: 200,
			timingFunction: 'linear'
		});
		animation.translateY(0).step()
		animationData.value = animation.export();
		setTimeout(() => {
			animation.translateY(600).step()
			animationData.value = animation.export();
			isShow.value = false;
		}, 200);
	}
	onNavigationBarButtonTap((e) => {
		// #ifdef APP-PLUS
		if (e.type === "share") {
			uni.share({
				provider: 'weixin',
				type: 0,
				title: result.value.text,
				scene: "WXSceneSession",
				href: 'http://localhost:3000/#/pages/details/details?id=' + id.value,
				imageUrl: "",
				success: () => {
					uni.showTabBar({
						title: "分享成功"
					})
				},
				fail: () => {

				}
			})
		}
		// #endif
	});
	onBackPress(() => {
		if (isShow.value) {
			hide();
			return true;
		}
	});
	onLoad(async (option) => {
		id.value = option.id;
		result.value = (await getDetails(option.id))[0];
	});
</script>

<style lang="scss" scoped>
	.bg {
		background: #f2f2f2;
		padding-bottom: 90rpx;

		.detail-swiper {
			width: 100%;
			height: 840rpx;

			image {
				width: 100%;
			}
		}

		.detail-goods {
			text-align: center;
			padding: 80rpx;

			.goods-price1 {
				font-size: 36rpx;
				font-weight: bold;
			}
		}

		.detail-detail {
			image {
				width: 100%;
			}
		}
	}

	.detail-foot {
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 90rpx;
		background-color: #fff;
		text-align: center;

		.iconfont {
			width: 60rpx;
			height: 60rpx;
			background-color: #000;
			margin: 0 20rpx;
			color: #fff;
			border-radius: 100%;
		}

		.right {
			display: flex;
			margin-left: 70rpx;

			.add-shopcart {
				margin: 0 20rpx;
				padding: 6rpx 30rpx;
				background-color: #000;
				color: #fff;
				border-radius: 40rpx;
			}

			.purchase {
				margin: 0 20rpx;
				padding: 6rpx 30rpx;
				background-color: #49bdfb;
				color: #fff;
				border-radius: 40rpx;
			}
		}
	}

	.pop {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 1000;

		.mask {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, .3);
		}

		.box {
			position: absolute;
			width: 100%;
			height: 300px;
			bottom: 0;
			left: 0;
			background-color: #fff;

			.box-bg {
				position: relative;
				height: 100%;

				.img-bg {
					position: absolute;
					top: -60rpx;
					display: flex;

					.pop-img {
						padding: 0 30rpx;
						width: 260rpx;
						height: 260rpx;
					}

					.f-active-color {
						padding: 70rpx 0;
						font-size: 36rpx;
						font-weight: bold;
					}
				}

				.box-bottom {
					padding-top: 260rpx;
					padding-left: 30rpx;
					padding-right: 30rpx;

					.num {
						padding: 30rpx 0;
						border-top: 2rpx solid #f2f2f2;
						border-bottom: 2rpx solid #f2f2f2;
						display: flex;
						justify-content: space-between;
						align-items: center;
					}

					.pop-sub {
						position: absolute;
						bottom: 0;
						left: 0;
						width: 100%;
						height: 90rpx;
						text-align: center;
						background-color: #42B7FB;
						line-height: 90rpx;
					}
				}
			}

		}
	}
</style>
